<template>
    <div>
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="18">
                        <h1>酬金管理系统</h1>
                    </el-col>
                    <el-col :span="2" class="userName">
                        <div class="userName">
                            {{userName}},欢迎您
                            <div class="exit">
                                <span @click="exit">退出</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="210px"><left-menu/></el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import leftMenu from '../../components/home/leftMenu.vue'
export default {
    name:'Home',
    components:{
        leftMenu
    },
    data(){
        return{
            userName:this.$store.state.userInfo.userName,
        }
    },
    methods:{
        exit(){
            this.$router.push('login')
            localStorage.removeItem('token')
        }
    }
}
</script>

<style scoped>
    .userName{
        text-align: right;
        cursor: pointer;
        float: right;
    }
    .userName:hover .exit{
        display: block;
    }
    .exit{
        position: absolute;
        right: 0;
        background-color: #304156;
        width: 80px;
        text-align: center;
        display: none;
        transition: all .3s ease;
    }

    h1{
        text-align: left;
        letter-spacing: 2px;
    }
  .el-header {
    background-color: #3e71a5;
    color: white;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #304156;
    color: white;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-main {
      min-height: 693px;
  }
</style>